<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>平台数据展示</title>
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/css/layui.css">
    <style type="text/css">
        body,html{
            height: 98%;
        }

        .layui-container {
            padding: 0 0;
            height: 100%;
        }
       .table_con{
          height: 100%;
       }
        .con_box{
            height: 100%;
        }
        table{
            height: 100%;
        }
        table tbody {
            display:block;
            height:80%;
            overflow-y:scroll;
        }

        table thead, tbody tr {
            display:table;
            /*width:100%;*/
            table-layout:fixed;
        }
        #dataBody::-webkit-scrollbar {
            display: none;
        }
      table tr td,th{
           text-align: center;
           min-width: 200px;
       }
        .table tr:nth-last-child(1) td{
            background-color: rgb(221,235,247);
        }
     </style>
</head>
<body>
<div class="con_box">
    <div class="layui-container " style="width: 100%;" id="indexModel">

        <!--<div class="layui-row" style="margin-top: 10px;">-->
            <!--<div class="layui-col-md3 " style="margin-right: 10px;">-->
                <!--<input type="text" class="form-control" required  id="Time"  placeholder="请输入日期"  autocomplete="off" >-->
            <!--</div>-->
            <!--<div class="layui-col-md3 ">-->
                <!--<div class="btn btn-success" id="searchBtn">查询</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="table_con">
            <table class="table table-hover">
                <thead id="dataHead">

                </thead>
                <tbody id="dataBody">

                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        showDataPage.init();
    });
     var showDataPage = {
            init:function () {
                var _this = this;
                _this.getData();
            },
            getQueryString:function (name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            },
            getData:function () {
                var baseURL = "../../";
                var _this = this;
                var  indexLoading = layer.load(2);
                var _type = _this.getQueryString('type');
                var params = {
                    type:_type
                };
                $.ajax({
                    type : "post",
                    url : baseURL+"platformDataDailyMove/findEverydayPlatformPhoneContrast",
                    contentType:"application/json",
                    data:JSON.stringify(params),
                    success: function(data) {
                        layer.close(indexLoading);
                        if(data.code==0){
                            _this.transData(data.result);
                        }else{
                            layer.msg('数据获取失败');
                        }
                    },
                    error:function(){
                        layer.close(index);
                        statsData = false;
                        layer.msg('数据获取失败');
                    }
                });
            },
         transData:function (data) {
             var _this = this;
             var theadItem = [];
             var str = '';
             var _html = '';
             var dateTime = '';
             for(item in data){
                 //console.log(item);
                 dateTime = item;
                 for(item2 in data[item]){
                     //console.log(item2);
                     _html = _html + '<tr><td>'+dateTime+'</td><td>'+item2+'</td>';
                    for(var i = 0 ; i<data[item][item2].length;i++){
                        _html = _html+ '<td>'+data[item][item2][i].value+'</td>';
                        if(theadItem.indexOf(data[item][item2][i].param) == -1){
                            // console.log(data[item][item2][i].param);
                             theadItem.push(data[item][item2][i].param);
                         }
                     }
                     _html = _html + '</tr>';
                 }
             };
          str = str + '<tr><th>日期</th><th>平台</th>';
          for(var j=0;j<theadItem.length;j++){
              str = str + '<th>'+theadItem[j]+'</th>';
          };
           str = str + '</tr>';
           $("#dataHead").html(str);
           $("#dataBody").html(_html);
        }
     }
</script>
</html>